<template>
    <div id="main" style="width:100%; height:100%"></div>
</template>

<script>
import leidaData from "../../assets/json/Emotional_data.json";
import { useStore } from "vuex";
import * as echarts from 'echarts';
import { onMounted, watch } from 'vue';
export default {
  data() {
    return {
      leidaData,
    };
  },
  setup(){

    const store = useStore();

    // 监听 time 的变化
    watch(
      () => store.state.time,
      (newTime) => {
        radar(newTime);
      }
    );

    

    onMounted(()=>{
      radar(store.state.time);
    })

    function radar(province) {
      const pro = Object.keys(leidaData);
      pro.forEach((pro) => {
        if (pro == province) {
          drawRadar(pro, leidaData[pro]);
        }
      });
    };
    function drawRadar(pro, data) {
      // console.log(data);
      let radar = echarts.init(document.getElementById("main"));
      const lineStyle = {
        width: 1,
        opacity: 0.5,
      };
      const maxValues = calculateMaxValues(data);
      var option = {
        // 这里是设置背景颜色
        // backgroundColor: '#161627',
        title: {
          //这里设置标题
          // text: "情感数据",
          left: "center",
          textStyle: {
            color: "#42403b",
          },
        },
        legend: {
          // 这是图例
          bottom: 5,
          data: pro,
          itemGap: 20,
          textStyle: {
            color: "#282623",
            fontSize: 14,
          },
          selectedMode: "single",
        },
        radar: {
          indicator: [
            // 这是雷达图的内容
            { name: "喜", max: 100 },
            { name: "怒", max: 100 },
            { name: "忧", max: 100 },
            { name: "思", max: 100 },
            { name: "惊", max: 100 },
          ],
          shape: "circle",
          // 有几根线
          splitNumber: 5,
          axisName: {
            // 外圈字的颜色
            color: "#43341B",
          },
          splitLine: {
            lineStyle: {
              color: [
                // 圆圈线的颜色变化
                "rgba(53,51,46, 0.2)",
                "rgba(53,51,46, 0.3)",
                "rgba(53,51,46, 0.4)",
                "rgba(53,51,46, 0.6)",
                "rgba(53,51,46, 0.8)",
                "rgba(53,51,46, 0.9)",
              ].reverse(),
            },
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              // 中间的线的颜色
              color: "rgba(106, 102, 92, 0.3)",
            },
          },
        },
        series: [
          {
            name: pro,
            type: "radar",
            lineStyle: lineStyle,
            data: data,
            symbol: "none",
            itemStyle: {
              //修改图的颜色
              color: "#8f704d",
            },
            areaStyle: {
              opacity: 0.1,
            },
          },
        ],
      };
      radar.setOption(option);
    }

    function calculateMaxValues(data) {
      // 初始化数组以存储每个指示符的最大值
      const maxValues = Array(data[0].length).fill(0);

      //遍历数据中的每一行
      data.forEach((row) => {
        // 更新每个指标的最大值
        row.forEach((value, index) => {
          if (value > maxValues[index]) {
            maxValues[index] = value;
          }
        });
      });
      return maxValues;
    };
  }

};
</script>

<style>
</style>